<template>
	<view class="homeAssets">
		<HeaderBar title="首页资产" showBack fixed />
		<view class="contentBox">
			<view class="hotList">
				<view class="itemBox" v-for="(i,index) in choinInfo" :key="index">
					<view class="item_icon">
						<image
							:src="'/static/images/tokenicon/' +i.tokenaddress+chainInfo.chainType+chainInfo.chainId+'.png'"
							mode="widthFix" class="icon" @error="imageError(i)" v-if="!i.err"></image>
							<image src="/static/images/notoken.png" mode="widthFix" class="icon" v-show="i.err"></image>
					</view>
					<view class="right">
						<view class="coindes">
							<view class="name">
								<text>{{i.tokensymbol}}</text>
							</view>
							<view class="address" v-if="i.tokenaddress!=$config.defaultAddress">
								{{$utils.formatAddress(i.tokenaddress)}}
							</view>
							<view class="balacne">
								余额：{{i.tokennum}}
							</view>
						</view>
						<view class="state" v-if="i.tokenaddress!=$config.defaultAddress">
							<image src="/static/images/home/delGray.png" class="icon" mode="widthFix"
								@tap="delToken(i.tokenaddress)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		computed: {
			address() {
				return this.$store.getters.getAddress;
			},
			chainId() {
				return this.$store.getters.getChainId;
			},
			chainInfo() {
				return this.$store.getters.chainInfo
			},
			choinInfo() {
				return this.$store.getters.choinInfo
			},
		},
		mounted() {},
		methods: {
			imageError(item) {
				this.$set(item, 'err', true);
			},
			delToken(tokenaddress) {
				uni.$db.delete('list', { // 删除一条数据
					from: 'choinList',
					where: [{
						address: `= "${this.address}"`,
						chainId: `= "${this.chainId}"`,
						tokenaddress: `= "${tokenaddress}"`
					}]
				}).then(res => {
					this.$updateWalletInfo()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.homeAssets {
		height: 100%;

		.contentBox {

			.hotList {
				padding-left: 46upx;

				.itemBox {
					display: flex;
					height: 160upx;
					align-items: center;
					border-bottom: 1upx solid #D8D8D8;

					.item_icon {
						display: flex;

						.icon {
							width: 82upx;
							height: 82upx;
							border-radius:50%;
						}
					}

					.right {
						height: 120upx;
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left: 22upx;
						padding-right: 46upx;


						.name {
							display: flex;
							align-items: center;
							font-size: 36upx;
						}

						.address {
							color: #A2A2A2;
							font-size: 24upx;
						}

						.balacne {
							font-size: 24upx;
						}

						.state {
							display: flex;

							.icon {
								width: 60upx;
								height: 60upx;
							}
						}
					}
				}
			}
		}
	}
</style>